<!DOCTYPE html>
<title>The top of the text track container should be in the bottom 25% of the video element.</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<video preload="auto" autoplay>
    <track src="captions-webvtt/captions-snap-to-lines-not-set.vtt" kind="captions" >
    <track src="captions-webvtt/simple-captions.vtt" kind="captions" >
    <track src="captions-webvtt/sorted-dispatch.vtt" kind="captions" >
    <track src="captions-webvtt/captions-fast.vtt" kind="captions" >
    <track src="captions-webvtt/captions-html.vtt" kind="captions" >
    <track src="captions-webvtt/captions.vtt" kind="captions" default>
</video>
<script>
async_test(function(t) {
    var video = document.querySelector("video");
    video.src = "../content/test.ogv";

    video.oncanplaythrough = t.step_func_done(function() {
        var cueDisplayElement = textTrackDisplayElement(video);
        document.body.offsetTop; // Force layout.
        assert_true(cueDisplayElement.offsetTop > (video.videoHeight * 0.75));
    });
});
</script>
